<template>
  <div class='container'>

    <!-- 空白卡片组件 -->
    <el-card class="box-card">

      <!-- from表单  tab栏 -->
      <div class="tab">
        <el-form ref="filterForm" :inline="true" :model="querys" class="demo-form-inline">
          <div class="left">
            <el-form-item label="关键字">
              <el-input v-model="querys.keyword" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="querys.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetButton">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="filterButton" >搜索</el-button>
            </el-form-item>
          </div>
          <div class="right">
            <el-form-item>
            <el-button type="success" icon="el-icon-edit" class="new_button" @click="addFn" >新增技巧</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 警告提示 -->
      <div class="warning">
        <el-alert :title="`数据一共 ${numberOfLists} 条`" type="info" show-icon :closable="isShow">
        </el-alert>
      </div>

      <!-- 表格筛选 -->

        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-row :gutter="24">
          <el-col :span="4">
            <el-table-column
              prop="tag"
              label="操作"
              width="200px"
              filter-placement="bottom-end"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="previewFn(scope.row)">预览</el-button>
                <el-button type="text" @click="forbiddenFn(scope.row)">
                  {{scope.row.state === 1 ? '禁用' : '启用'}}
                </el-button>
                <el-button type="text" @click="revampFn(scope.row)" :disabled="scope.row.state === 0">修改</el-button>
                <el-button type="text" @click="delFn(scope.row)" :disabled="scope.row.state === 0">删除</el-button>
              </template>
            </el-table-column>
          </el-col>
          <el-col :span="2">
            <el-table-column
              type="index"
              label="序号"
              width="80px"
              column-key="date"
            >
            </el-table-column>
          </el-col>
          <el-col :span="10">
            <el-table-column
              prop="title"
              label="文章标题"
              width="400px"
            >
              <template slot-scope="scope">
                {{scope.row.title}}
                <a href="#" v-if="!(scope.row.videoURL ===  null)" @click="videoShow(scope.row.videoURL)">
                  <i class="el-icon-film" ></i>
                </a>
              </template>
            </el-table-column>
          </el-col>
          <el-col :span="2">
            <el-table-column
              prop="visits"
              label="阅读数"
              width="150px"
            >
            </el-table-column>
          </el-col>
          <el-col :span="2">
            <el-table-column
              prop="username"
              label="录入人"

            >
            </el-table-column>
          </el-col>
          <el-col :span="3">
            <el-table-column
              prop="createTime"
              label="录入时间"

            >
              <template slot-scope="scope">
                {{scope.row.createTime | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')}}
              </template>
            </el-table-column>
          </el-col>
          <el-col :span="2">
            <el-table-column
              prop="state"
              label="状态"
              width="80px"
            >
              <template slot-scope="scope">
                {{scope.row.state===0? '已禁用' : '已启用'}}
              </template>
            </el-table-column>
          </el-col>

          </el-row>
        </el-table>

      <!-- 分页 -->
      <div class="block" >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querys.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="querys.pagesize"
          layout="  prev, pager, next, sizes, jumper"
          :total="numberOfLists"
        >
        </el-pagination>
      </div>

      <!-- 新增文章弹框 -->
      <el-dialog :title="reviseArticle.showRevise ? '修改文章' : '新增文章' " :visible.sync="isHide" width="52%" >
        <!-- 新增/修改弹框组件 -->
        <articles-add ref="dialogBox" v-if="isHide" @getArticleList="getArticleList" @close="isHide=false" :reviseArticle="reviseArticle"></articles-add>
      </el-dialog>

      <!-- 预览弹框 -->
      <el-dialog title="预览" :visible.sync="isShowPreview" width="52%" >
        <!-- 预览组件 -->
        <articles-preview :previewData="previewData"></articles-preview>
      </el-dialog>

      <!-- 视频弹框 -->
      <el-dialog :visible.sync="isShowVideo" :show-close="false" top="-200px" class="videoCSS">
        <div v-if="isShowVideo" >
          <!-- 视频标签 -->
          <video :src="videoSRC" autoplay class="box"></video>
          <!-- 关闭按钮 -->
          <el-button icon="el-icon-close" circle class="el-color" @click="closeVideo"></el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>

import articlesAdd from '../components/articles-add'
import articlesPreview from '../components/articles-preview'
import { list, detail, remove, changeState } from '@/api/hmmm/articles.js'

export default {
  name: 'Articles', // 组件名
  // 注册子组件
  components: {
    articlesAdd,
    articlesPreview
  },
  data () {
    return {
      numberOfLists: null, // 列表数量
      tableData: [], // 列表

      reviseArticle: { // 修改文章时回显数据
        articleBody: '', // 文章内容
        title: '', // 文章标题
        videoURL: null, // 视频地址
        showRevise: false // 显示的是否是修改弹框
      },

      querys: { // 请求列表和分页的数据
        page: 1, // 页数
        pagesize: 10, // 每页条数
        keyword: null, // 关键字
        state: null // 状态
      },

      isShow: false, // 是否显示警告条的叉号
      // currentPage4: 1, // 默认前往那一页
      isHide: false, // 是否显示新增员工弹框
      isShowPreview: false, // 是否显示预览弹框
      previewData: {}, // 文章详情
      isShowVideo: false, // 视频弹框是否显示
      videoSRC: null // 视频地址
    }
  },

  created () {
    // 调用api刷新列表
    this.getArticleList()
  },

  methods: {
    // 获取文章列表
    async getArticleList () {
      // 调用api
      const res = await list(this.querys)
      // 获取列表并赋值
      this.tableData = res.data.items
      console.log(res.data)
      // 获取列表总数量
      this.numberOfLists = res.data.counts
      // 新增员工为关闭状态
      this.isHide = false
    },

    // 分页 条数
    handleSizeChange (val) {
      // 当每页条数发生变化时 返回第一页
      this.querys.page = 1
      // val 为当前页为有多少条 当条数发生变化时自动触发
      this.querys.pagesize = val
      // 刷新列表
      this.getArticleList()
    },

    // 分页 页数
    handleCurrentChange (val) {
      // val 为当前页数  发生改变时自动触发
      this.querys.page = val
      // 刷新列表
      this.getArticleList()
    },

    // 新增文章
    addFn () {
      // 显示弹框
      this.isHide = true
      // 显示的不是修改弹框
      this.reviseArticle.showRevise = false
    },

    // 修改文章
    async revampFn (data) {
      console.log(data)
      // 调用api获取文章详情
      const res = await detail(data)
      // console.log(res.data)
      this.reviseArticle = res.data
      // 显示弹框
      this.isHide = true
      // 显示的是修改弹框
      this.reviseArticle.showRevise = true
      // 因为显示弹框这个操作是异步的 且$refs只能等弹框显示后才能获取 所以用$nextTick()将其变为异步的
      this.$nextTick(() => {
        // 回显赋值
        this.$refs.dialogBox.form = res.data
      })
    },

    // 删除文章
    delFn (data) {
      // 提示组件
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 判断要删除的这一项是不是该页的最后一条
        if (this.tableData.length === 1) {
          // 是的话返回上一页
          this.querys.page--
        }
        // 判断是不是第一页 如果是第一页 就不需要去上一页
        if (this.querys.page === 1) {
          this.querys.page = 1
        }
        // 调用接口 删除文章
        await remove(data)
        // 提示消息
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新列表
        this.getArticleList()
      })
    },

    // 禁用与启用   核心三元表达式
    async forbiddenFn (data) {
      // 调用改变文章状态的接口
      await changeState({
        // 传参为对象
        id: data.id,
        // 参数为 需要改变状态的文章的 id 与当前的状态
        state: data.state === 1 ? 0 : 1
      })
      // 点击之后 给状态取反
      data.state = data.state === 1 ? 0 : 1
    },

    // 预览按钮
    async previewFn (data) {
      // 显示预览弹框
      this.isShowPreview = true
      // 调用文章详情api
      const res = await detail(data)
      // 将获取到的数据赋值给 定义的原始数据
      this.previewData = res.data
    },

    // 筛选按钮
    filterButton () {
      // console.log(this.$refs.filterForm.model)
      // 判断当关键字与状态都为 undefined 时 停止执行
      if (this.$refs.filterForm.model.keyword === undefined && this.$refs.filterForm.model.state === undefined) return
      // 通过 $refs 获取 form 组件 在获取实时的 state 和 keyword 赋值给原始数据
      this.querys.state = this.$refs.filterForm.model.state
      this.querys.keyword = this.$refs.filterForm.model.keyword
      // 用更新过的原始数据作为参数重新调用刷新列表 api
      this.getArticleList(this.querys)
    },

    // 重置按钮
    resetButton () {
      // 将关键字与状态 重置为null
      this.$refs.filterForm.model.state = null
      this.$refs.filterForm.model.keyword = null
      // 并刷新列表
      this.getArticleList()
    },

    // 关闭视频弹框
    closeVideo () {
      this.isShowVideo = false
    },

    // 获取视频地址
    videoShow (src) {
      // 显示视频弹框
      this.isShowVideo = true
      // src 为通过插槽获取的视频地址传参过来的 将它赋值给定义的视频地址变量
      this.videoSRC = src
    }
  }
}
</script>

<style scoped lang='scss'>
  .warning {
    margin-bottom: 10px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .demo-form-inline{
    // display: flex;
    width: 100%;
  }
  .new_button {
    float:right;
    // margin-left: 450px;
  }
  .box-card {
    margin: 15px 10px;
  }
  .block {
    float: right;
  }
  .el-icon-film {
    color: #00f;
  }
  .videoCSS ::v-deep .el-dialog__header {
    // background-color: rgba($color: #fff, $alpha: 0);
    height: 0px;
    margin-bottom: 150px;
  }
  .videoCSS ::v-deep .el-dialog{
    background-color: rgba($color: #000000, $alpha: 0);
    // padding-left: 400px;
    width: 100%;
    height: 100px;
  }
  .videoCSS ::v-deep .el-dialog__body {
    padding: 400px;
    padding-top: 150px;
    padding-bottom: 120px;
    padding-left: 350px;
  }
  .videoCSS ::v-deep .el-color {
    position: fixed;
    left: 48%;
    top: 50px;
    background-color: rgba($color: #000000, $alpha: 0.3);
    border: rgba($color: #000000, $alpha: 0.3);
    color: #fff;
    font-size: 30px;
  }
  .videoCSS ::v-deep .box {
    width: 820px;
    height: 465px;
  }
</style>
